<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0; padding: 0;
            }
            html {
                width: 500px; height: 700px;
                background-color: #fff;
            }
            body {
                width: 500px; height: 700px;
                /* width: 1080px; height: 2142px; */
                background-color: #8a8774;
                /* overflow: hidden; */
            }
            h4 {
                color: #f4f279;
                font: 24px/40px "";
                text-align: left;
            }
            h5 {
                color: #f4f279;
                font: 24px/40px "";
                text-align: right;
            }
            #tutao {
                width: 350px; height: 350px;
                overflow: hidden;
                border-radius: 50%;
                margin: 0 auto;
            }
            #tutao>img {
                display: block;
                width: 336px; height: 336px;
                border: 14px solid #8c8771;
                border-radius: 50%;
                margin: 10px auto;
                transition: all .5s;
            }
            h1 {
                color: #ffffff;
                font: 30px/60px "";
            }
            #box{width: 500px;height: 70px;margin: 20px auto;display: flex;align-items: center;line-height: 50px;text-align: center;}
            #box span{width: 50px;height: 50px;color: #fff;}
            #box em{width: 50px;height: 50px;color: #d4cdbd;}
            .bar{width: 350px;background: #ccc;height: 30px;position: relative;border-radius: 15px;}
            .bar p{margin: 0;height: 3px;width: 350px;background: #fff;position: absolute;left: 0;top:15px;}
            .bar i{width: 20px;height: 20px;background: #fff;position: absolute;border-radius: 50%;}
            #kongjian {
                text-align: center;
            }
            #kongjian>button:nth-child(1) {
                width: 40px; height: 40px;
                border-radius: 50%;
                vertical-align:middle;
                border: none;
                background: url(./img/上一曲.jpg) no-repeat center/30px 30px;
            }
            #kongjian>button:nth-child(2) {
                width: 50px; height: 50px;
                border-radius: 50%;
                border: none;
                margin: 5px 50px;
                vertical-align:middle;
            }
            #kongjian>button:nth-child(3) {
                width: 40px; height: 40px;
                border-radius: 50%;
                vertical-align:middle;
                background: url(./img/下一曲.jpg) no-repeat center/30px 30px;
                border: none;
            }
            audio {
                width: 500px;
            }
            
        </style>
    </head>
    <body>
        <h4>Eeryday everynight TrackMaker </h4>
        <h5>明天就稿期啦熬夜肝吧 </h5>
        <div id="tutao"><img src="./img/旋转图.jpg" alt=""></div>
        <h1>室内系的TrackMaker</h1>
        <audio src="./img/hanser - 室内系的TrackMaker.mp3"></audio>
        
        <div id="box">
            <span>0%</span>
            <em>00:00</em>
            <div class="bar">
                <p></p>
                <i style="left:0;top:5px;"></i>
            </div>
            <em>03:18</em>
        </div>
        <div id="kongjian">
            <button></button>
            <button></button>
            <button></button>
        </div>
        




        <script>
            
            
            var audio = document.querySelector('audio')
            var btn = document.querySelector('#kongjian>button:nth-child(2)')
            var jd = 0



            btn.onclick = function() {
                
                var imgObj = document.querySelector('#tutao>img')
                if(audio.paused) {
                    audio.play();
                    this.style.background = 'url(./img/播放.jpg) no-repeat center/40px 40px'
                    

                    // imgObj.style.transform = 'scale(1.1)'
                    timer = setInterval(function(){
                        window.jd+=1 
                        var xx = parseInt(audio.currentTime)
                        // console.log (xx)
                        var fen = parseInt(xx/60)
                        // console.log (fen)
                        var miao = xx%60
                        if(miao<10){
                            document.querySelector('#box>em:nth-of-type(1)').innerText = '0'+fen+':'+'0'+miao
                        }else {
                            document.querySelector('#box>em:nth-of-type(1)').innerText = '0'+fen+':'+miao
                        }
                        imgObj.style.transform = 'scale(1.1) rotate('+window.jd+'deg)'
                    },100)
                    return
                }
                    audio.pause();
                    this.style.background = 'url(./img/暂停.jpg) no-repeat center/40px 40px'
                    clearInterval(timer)
                    imgObj.style.transform = 'scale(1) rotate('+window.jd+'deg)'
                    var jd = window.jd
            }


            var bluebtn = document.querySelector('.bar i')
            bluebtn.onmousedown = function() {
                document.onmousemove = function(evt) {
                    var e = evt || window.event;
                    var left = e.clientX - document.querySelector('.bar').offsetLeft

                    // 限定
                    if(left<0) left = 0;
                    var maxLeft = document.querySelector('.bar').clientWidth - bluebtn.offsetWidth;
                    if(left>maxLeft) left = maxLeft;

                    //给播放器绑定进度条
                    audio.currentTime = left

                    //  3 重置left位置
                    bluebtn.style.left = left + 'px' 
                    // 细节：同步红色背景
                    document.querySelector('.bar p').style.width = left + 'px'
                    //百分比
                    document.querySelector('#box span').innerText = parseInt(left / maxLeft * 100) +'%'
                }
                document.onmouseup = function() {
                    document.onmousemove = null
                }
            }
        </script>
    </body>
</html>